<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts/base :: head(~{::title})">
    <title>信息表单</title>
   
</head>
<body>
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-half">
                <h2 class="title is-2 has-text-centered mb-6">个人信息增添表</h2>
                <form th:action="@{/items/add}" th:object="${item}" method="post" enctype="multipart/form-data" class="box" style="max-width: 450px; margin: 0 auto;">
                    <input type="hidden" th:field="*{id}">
                    
                    <!-- 姓名 -->
                    <div class="form-field">
                        <label class="label" for="name">姓名</label>
                        <div class="control">
                            <input type="text" id="name" th:field="*{name}" placeholder="请输入姓名" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 年龄 -->
                    <div class="form-field">
                        <label class="label" for="age">年龄</label>
                        <div class="control">
                            <input type="text" id="age" th:field="*{age}" placeholder="请输入年龄" min="0" max="120" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 性别 -->
                    <div class="form-field">
                        <label class="label">性别</label>
                        <div class="control">
                            <div class="radio-group">
                                <div class="radio-item">
                                    <input type="radio" id="male" th:field="*{sex}" value="男" class="radio">
                                    <label for="male" class="radio-label">男</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="female" th:field="*{sex}" value="女" class="radio">
                                    <label for="female" class="radio-label">女</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 手机号 -->
                    <div class="form-field">
                        <label class="label" for="phone">手机号</label>
                        <div class="control">
                            <input type="text" id="phone" th:field="*{phone}" placeholder="请输入手机号" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 邮箱 -->
                    <div class="form-field">
                        <label class="label" for="email">邮箱</label>
                        <div class="control">
                            <input type="email" id="email" th:field="*{email}" placeholder="请输入邮箱" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 地址 -->
                    <div class="form-field">
                        <label class="label" for="address">地址</label>
                        <div class="control">
                            <input type="text" id="address" th:field="*{address}" placeholder="请输入地址" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 云服务器 -->
                    <div class="form-field">
                        <label class="label">云服务器</label>
                        <div class="control">
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="aliyun" th:field="*{cloudserver}" value="阿里云" class="checkbox">
                                    <label for="aliyun" class="checkbox-label">阿里云</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="jingdongyun" th:field="*{cloudserver}" value="京东云" class="checkbox">
                                    <label for="jingdongyun" class="checkbox-label">京东云</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="tecentcloud" th:field="*{cloudserver}" value="腾讯云" class="checkbox">
                                    <label for="tecentcloud" class="checkbox-label">腾讯云</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="huaweicloud" th:field="*{cloudserver}" value="华为云" class="checkbox">
                                    <label for="huaweicloud" class="checkbox-label">华为云</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 工作年数 -->
                    <div class="form-field">
                        <label class="label" for="workYear">工作年数</label>
                        <div class="control">
                            <input type="number" id="workYear" th:field="*{workYear}" placeholder="请输入工作年数" min="0" max="50" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 薪资 -->
                    <div class="form-field">
                        <label class="label" for="salary">薪资</label>
                        <div class="control">
                            <input type="number" id="salary" th:field="*{salary}" placeholder="请输入薪资" min="0" class="input aligned-input" required>
                        </div>
                    </div>
                    
                    <!-- 备注 -->
                    <div class="form-field">
                        <label class="label" for="remark">备注</label>
                        <div class="control">
                            <input type="text" id="remark" th:field="*{remark}" placeholder="请输入备注" class="input aligned-input">
                        </div>
                    </div>
                    
                    <!-- 照片上传 -->
                    <div class="form-field">
                        <label class="label" for="photo">照片</label>
                        <div class="control">
                            <div class="file">
                                <label class="file-label">
                                    <input class="file-input" type="file" id="photo_input" accept="image/*" >
                                    <span class="file-cta">
                                        <span class="file-label">
                                            选择照片
                                        </span>
                                    </span>
                                </label>
                            </div>
                            <input type="hidden" id="photo" th:field="*{photo}">
                            <div id="photo_preview" class="photo-preview mt-4"></div>
                        </div>
                    </div>
                        
                  
                    
                    <!-- 提交按钮 -->
                    <div class="form-field">
                        <div class="control">
                            <button type="submit" class="button is-primary is-medium aligned-input">提交信息</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script src="/javascripts/add_items.js"></script>
    
    <style>
        #form {
            max-width: 325px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .form-field {
            margin-bottom: 1.5rem;
        }
        
        .aligned-input {
            max-width: 275px;
        }
        
        .checkbox-group, .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .checkbox-item, .radio-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .photo-preview {
            margin-top: 10px;
            text-align: center;
        }
        
        .photo-preview img {
            max-width: 200px;
            max-height: 200px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</body>
<footer th:replace="layouts/base :: footer"></footer> 
</html>